<template>
  <div>
    <h1>Homework Com1</h1>
    <div class="tab-box" v-for="(item, index) in tapArr" :key="index" @mouseover="tap(index)">{{ item }}</div>
    <slot :name="mode"></slot>
  </div>
</template>
<script>
  // 导入组件
  
  export default {
    // 注册组件
    components: {
     },
    // 实例属性
    name: 'APP',
    // 数据
    data () {
      return {
        tapArr: ['娱乐新闻', '军事新闻', '政治新闻'],
        modeArr: ['recreation', 'military', 'politics'],
        mode:'recreation'
       }
     },
     // 实例方法
     methods: {
        tap (index) {
            this.mode = this.modeArr[index]
        }
     },
     // 计算属性
     computed: {
     },
     // 创建后（只能访问数据，不能操作dom）
     created () {
     },
     // 挂载后（既能访问数据，也能操作dom）
     mounted () {
     },
     // 过滤器
     filters: {
     }
  }
</script>
<style lang="less" scoped>
    .tab-box{
        display: inline-block;
        padding: 10px;
        border: 1px solid #ccc;
        cursor: pointer;
    }
</style>
